<g:if test="${chartFile.tableThemeSource!=null}" >
<script type="text/html" id="tableThemeSource">
${raw(chartFile.tableThemeSource.replace("\\n","\\\\n").replace("\\t","\\\\t"))}
</script>
</g:if>

<script src="../static/js/echarts.min.js" type="text/javascript"></script>
<script src="../static/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="../static/js/baiduTemplate.js" type="text/javascript"></script>

<script>
    
    function rowToColumn(dataset) {
        var newDataset = {
            dimensions:[],
            source:[]
        }
        var dimensionsObj = {}
        var sourceObj = {}
        
        if (dataset.dimensions.length>=3) {
            newDataset.dimensions.push(dataset.dimensions[0])
            for (var i=0;i<dataset.source.length;i++) {
                //console.log(44423)
                var data = dataset.source[i]
                var v = data[dataset.dimensions[2]]
                var d = data[dataset.dimensions[1]]
                var s = data[dataset.dimensions[0]]
                //console.log(dimensionsObj[d])
                if (dimensionsObj[d]==null) {
                    newDataset.dimensions.push(d)
                    dimensionsObj[d] = true  
                }
                if (sourceObj[s]==null) {
                    sourceObj[s] = {}
                    sourceObj[s][dataset.dimensions[0]] = s
                    sourceObj[s][d] = v
                } else {
                    sourceObj[s][d] = v
                }
                    
            }
            for(var i in sourceObj) {
                newDataset.source.push(sourceObj[i])
            }
        } 
        if (dataset.dimensions.length==2) {
            newDataset.dimensions.push(dataset.dimensions[0])
            for (var i=0;i<dataset.source.length;i++) {
                //console.log(44423)
                var data = dataset.source[i]
                var d = data[dataset.dimensions[1]]
                var s = data[dataset.dimensions[0]]
                //console.log(dimensionsObj[d])
                if (dimensionsObj[d]==null) {
                    newDataset.dimensions.push(d)
                    dimensionsObj[d] = true  
                }
                if (sourceObj[s]==null) {
                    sourceObj[s] = {}
                    sourceObj[s][dataset.dimensions[0]] = s
                    sourceObj[s][d] = null
                } else {
                    sourceObj[s][d] = null
                }
                    
            }
            for(var i in sourceObj) {
                newDataset.source.push(sourceObj[i])
            }
        }

        if (dataset.dimensions.length==1) {
            newDataset.dimensions.push(dataset.dimensions[0])
            for (var i=0;i<dataset.source.length;i++) {
                var data = dataset.source[i]
                var v = null
                var s = data[dataset.dimensions[0]]
                
                if (sourceObj[s]==null) {
                    sourceObj[s] = {}
                    sourceObj[s][dataset.dimensions[0]] = s
                    
                } else {
                    
                }
                    
            }
            for(var i in sourceObj) {
                newDataset.source.push(sourceObj[i])
            }
        }    

        



        console.log(newDataset)
        return newDataset
    }

    function renderDefaultTable(chartSource) {
        

        var thead = '<thead><tr style="background-color:#d4e3e5;">'
        for (var i=0;i<chartSource.dataset.dimensions.length;i++) {
            thead +='<th style="border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;">'+chartSource.dataset.dimensions[i]+'</th>'
        }
        thead +='</tr></thead>'
        
        var tbody = '<tbody>'
        for (var i=0;i<chartSource.dataset.source.length;i++) {
            tbody += '<tr style="background-color:">'
            for (var j=0;j<chartSource.dataset.dimensions.length;j++) {
                var fieldName = chartSource.dataset.dimensions[j]
                tbody +='<td style="border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;">'+
                    (chartSource.dataset.source[i][fieldName]==null?"":chartSource.dataset.source[i][fieldName])
                    +'</td>'
            }
            tbody +='</tr>'
        }
        tbody +='</tbody>'

        /*var temp = '<table class="table table-striped table-bordered" '+
        'style=""width:100%;font:90%/1.45em "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif !important">'+thead+tbody+'</table>'
        */
        var temp = '<table style="width:100%;height:100%;font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;'+
        'border-color: #a9c6c9;border-collapse: collapse;" >'+thead+tbody+'</table>'
        $('#chart').html(temp)
        
        //$(obj).click(function(){
        //  	console.log(disObj)
        //});
    }
</script>

    <div id="chart" style="width: ${!params.width?800:params.width}px;height:${!params.height?550:params.height}px;"></div>
    <g:if test="${params.displayTable!=null&&params.displayTable=='true' || chartFile.display_table==true}" >
        <script>

            eval('var option = ${raw(chartSource.replace("\\n","\\\\n"))}')
            <g:if test="${chartFile.row_mode!=null && chartFile.row_mode}" >
                //chartSource.dataset = rowToColumn(chartSource.dataset)
            </g:if>

            <g:if test="${chartFile.tableThemeSource!=null}" >
                var temp = baidu.template($('#tableThemeSource').html(),
                    {
                        rows:option.dataset.source,
                        cols:option.dataset.dimensions
                    }
                );
                $('#chart').html(temp)
            </g:if>
            <g:else>
                renderDefaultTable(option)
            </g:else>



        </script>
    </g:if>
    <g:else>
        <script>
        <g:if test="${chartFile.themeId==null || chartFile.themeId==''}" >
            var chart = echarts.init(document.getElementById('chart'));
            eval('var option = ${raw(chartSource.replace("\\n","\\\\n"))}')
            

            chart.setOption(option)
        </g:if>
        <g:else>
            var themeSource = ${raw(chartFile.theme_source)}
            echarts.registerTheme('${chartFile.theme_name}', themeSource)
            var chart = echarts.init(document.getElementById('chart'),'${chartFile.theme_name}');
            eval('var option = ${raw(chartSource.replace("\\n","\\\\n"))}')
            
            chart.setOption(option)
        </g:else>
        </script>
    </g:else>
<g:set var="refreshTime" value="${params.refreshTime?params.refreshTime:chartFile.refresh_time}"/>   
<script>
    if (${refreshTime?(refreshTime as Integer):0}*1000!=0) {
        setInterval(
            function(){ 
                window.location.reload() 
            },
            ${refreshTime?(refreshTime as Integer):0}*1000
        )
    }
</script>